<template>
	<view class="orderDetail-content">
		<view class="order-detail">
			<view class="order-top">
				<view class="order-status">待付款</view>
				<view class="order-goods">
					<view class="goods-image">
						<image src="../../static/index/course.png" mode=""></image>
					</view>
					<view class="goods-info">
						<view>学法减分技巧答案</view>
						<view class="goods-price">
							<view>
								<text>￥</text>
								39.90
							</view>
							<view>已学习0%</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order-mid">
				<view>订单信息</view>
				<view class="order-info">
					<view class="info-item">
						<view>订单编号</view>
						<view>JKDD3478452345632547</view>
					</view>
					<view class="info-item">
						<view>创建时间</view>
						<view>2023-03-20 12:00:12</view>
					</view>
					<view class="info-item">
						<view>实付</view>
						<view>￥39.90</view>
					</view>
				</view>
			</view>
			<view class="order-tips">
				<view>购买退货须知</view>
				<view>七天无理由退货，学习超过5%或7个工作日，不受理 退款。</view>
			</view>
		</view>
		<view class="bottom-tabbar">
			<u-button shape="circle" :hair-line="false" :custom-style="leftBtn">取消订单</u-button>
			<u-button shape="circle" :custom-style="rightBtn" type="success">立即支付</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftBtn: {
					color: '#666666',
					border: '1rpx solid #E6E6E6',
					background: "#fff",
					marginRight: "20rpx"
				},
				rightBtn: {
					color: '#fff',
					background: "#2AC092"
				}
			}
		}
	}
</script>

<style lang="scss">
	.order-detail {
		padding: 20rpx;

		.order-top {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;


			.order-status {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #E6E6E6;
				font-size: 36rpx;
				color: #2AC092;
			}

			.order-goods {
				padding: 20rpx 0;
				display: flex;


				.goods-image {
					width: 240rpx;
					height: 160rpx;
					overflow: hidden;
					margin-right: 20rpx;
					border-radius: 10rpx;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				.goods-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc(100% - 260rpx);


					>view:nth-child(1) {
						color: 30rpx;
					}

					.goods-price {
						display: flex;
						justify-content: space-between;

						>view:nth-child(1) {
							color: #FF6D6A;
							font-size: 36rpx;

							>text {
								font-size: 28rpx;
							}
						}

						>view:nth-child(2) {
							font-size: 28rpx;
							color: #333;
						}
					}
				}
			}
		}

		.order-mid {
			padding: 30rpx 25rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 20rpx 0;

			>view:nth-child(1) {
				margin-bottom: 30rpx;
			}

			.order-info {

				.info-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
				}
			}
		}

		.order-tips {
			padding: 30rpx 25rpx;
			background-color: #fff;
			border-radius: 10rpx;

			>view:nth-child(1) {
				color: #333;
				font-size: 30rpx;
				margin-bottom: 30rpx;
			}

			>view:nth-child(2) {
				color: #FF6D6B;
				font-size: 28rpx;
			}

		}
	}
	
	.bottom-tabbar {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
	}
</style>